<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="icon" href="https://static.nowcoder.com/images/logo_87_87.png"/>
  <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"
        crossorigin="anonymous">
  <link rel="stylesheet" th:href="@{/css/global.css}"/>
  <link rel="stylesheet" th:href="@{/css/login.css}"/>
  <title>牛客网-账号设置</title>
</head>
<body>
<div class="nk-container">
  <!-- 头部 -->
  <header class="bg-dark sticky-top" th:replace="index::header">
    <div class="container">
      <!-- 导航 -->
      <nav class="navbar navbar-expand-lg navbar-dark">
        <!-- logo -->
        <a class="navbar-brand" href="#"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <!-- 功能 -->
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item ml-3 btn-group-vertical">
              <a class="nav-link" href="../index.html">首页</a>
            </li>
            <li class="nav-item ml-3 btn-group-vertical">
              <a class="nav-link position-relative" href="letter.html">消息<span class="badge badge-danger">12</span></a>
            </li>
            <li class="nav-item ml-3 btn-group-vertical">
              <a class="nav-link" href="register.html">注册</a>
            </li>
            <li class="nav-item ml-3 btn-group-vertical">
              <a class="nav-link" href="login.html">登录</a>
            </li>
            <li class="nav-item ml-3 btn-group-vertical dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
                 aria-haspopup="true" aria-expanded="false">
                <img src="http://images.nowcoder.com/head/1t.png" class="rounded-circle" style="width:30px;"/>
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item text-center" href="profile.html">个人主页</a>
                <a class="dropdown-item text-center" href="setting.html">账号设置</a>
                <a class="dropdown-item text-center" href="login.html">退出登录</a>
                <div class="dropdown-divider"></div>
                <span class="dropdown-item text-center text-secondary">nowcoder</span>
              </div>
            </li>
          </ul>
          <!-- 搜索 -->
          <form class="form-inline my-2 my-lg-0" action="search.html">
            <input class="form-control mr-sm-2" type="search" aria-label="Search"/>
            <button class="btn btn-outline-light my-2 my-sm-0" type="submit">搜索</button>
          </form>
        </div>
      </nav>
    </div>
  </header>

  <!-- 内容 -->
  <div class="main">
    <div class="container p-5 mt-3 mb-3">
      <!-- 上传头像 -->
      <h6 class="text-left text-info border-bottom pb-2">上传头像</h6>
      <form class="mt-5" method="post" enctype="multipart/form-data" th:action="@{/user/upload}">
        <div class="form-group row mt-4">
          <label for="head-image" class="col-sm-2 col-form-label text-right">选择头像:</label>
          <div class="col-sm-10">
            <div class="custom-file">
              <input type="file" th:class="|custom-file-input ${error != null ? 'is-invalid' : ''}|"
                     id="head-image" name="headerImage" lang="es" required="">
              <label class="custom-file-label" for="head-image" data-browse="文件">选择一张图片</label>
              <div class="invalid-feedback" th:text="${error}">
                头像上传失败
              </div>
            </div>
          </div>
        </div>
        <div class="form-group row mt-4">
          <div class="col-sm-2"></div>
          <div class="col-sm-10 text-center">
            <button type="submit" class="btn btn-info text-white form-control">立即上传</button>
          </div>
        </div>
      </form>
      <!-- 修改密码 -->
      <h6 class="text-left text-info border-bottom pb-2 mt-5">修改用户名密码</h6>
      <form class="mt-5" th:action="@{/user/setting}" method="post">
        <div class="form-group row mt-4">
          <label for="old-password" class="col-sm-2 col-form-label text-right ">新用户名:</label>
          <div class="col-sm-10">
            <input type="text" th:class="|form-control ${usernameMsg != null ? 'is-invalid' : ''}|" th:value="${param.newName}" id="new-name" name="newName" placeholder="请输入用户名!" required>
            <div class="invalid-feedback" th:text="${usernameMsg}">
              用户名已存在!
            </div>
          </div>
        </div>
        <div class="form-group row mt-4">
          <label for="old-password" class="col-sm-2 col-form-label text-right ">原密码:</label>
          <div class="col-sm-10">
            <input type="password" th:class="|form-control ${oldPasswordMsg != null ? 'is-invalid' : ''}|" th:value="${param.oldPassword}" id="old-password" name="oldPassword" placeholder="请输入原始密码!" required>
            <div class="invalid-feedback" th:text="${oldPasswordMsg}">
              原密码输入错误!
            </div>
          </div>
        </div>
        <div class="form-group row mt-4">
          <label for="new-password" class="col-sm-2 col-form-label text-right">新密码:</label>
          <div class="col-sm-10">
            <input type="password" th:class="|form-control ${newPasswordMsg != null ? 'is-invalid' : ''}|" th:value="${param.newPassword}" id="new-password" name="newPassword" placeholder="请输入新的密码!" required>
            <div class="invalid-feedback" th:text="${newPasswordMsg}">
              密码长度不能小于8位!
            </div>
          </div>
        </div>
        <div class="form-group row mt-4">
          <label for="confirm-password" class="col-sm-2 col-form-label text-right">确认密码:</label>
          <div class="col-sm-10">
            <input type="password" class="form-control" id="confirm-password" placeholder="再次输入新密码!" name="newPasswordRepeat" required>
            <div class="invalid-feedback">
              两次输入的密码不一致!
            </div>
          </div>
        </div>
        <div class="form-group row mt-4">
          <div class="col-sm-2"></div>
          <div class="col-sm-10 text-center">
            <button type="submit" class="btn btn-info text-white form-control" id="sub">立即保存</button>
          </div>
        </div>
      </form>
    </div>
  </div>

  <!-- 尾部 -->
  <footer class="bg-dark">
    <div class="container">
      <div class="row">
        <!-- 二维码 -->
        <div class="col-4 qrcode">
          <img src="https://uploadfiles.nowcoder.com/app/app_download.png" class="img-thumbnail" style="width:136px;"/>
        </div>
        <!-- 公司信息 -->
        <div class="col-8 detail-info">
          <div class="row">
            <div class="col">
              <ul class="nav">
                <li class="nav-item">
                  <a class="nav-link text-light" href="#">关于我们</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link text-light" href="#">加入我们</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link text-light" href="#">意见反馈</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link text-light" href="#">企业服务</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link text-light" href="#">联系我们</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link text-light" href="#">免责声明</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link text-light" href="#">友情链接</a>
                </li>
              </ul>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <ul class="nav btn-group-vertical company-info">
                <li class="nav-item text-white-50">
                  公司地址：北京市朝阳区大屯路东金泉时代3-2708北京牛客科技有限公司
                </li>
                <li class="nav-item text-white-50">
                  联系方式：010-60728802(电话)&nbsp;&nbsp;&nbsp;&nbsp;admin@nowcoder.com
                </li>
                <li class="nav-item text-white-50">
                  牛客科技©2018 All rights reserved
                </li>
                <li class="nav-item text-white-50">
                  京ICP备14055008号-4 &nbsp;&nbsp;&nbsp;&nbsp;
                  <img src="http://static.nowcoder.com/company/images/res/ghs.png" style="width:18px;"/>
                  京公网安备 11010502036488号
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </footer>
</div>

<div th:replace="index::common-js">
  <script th:src="@{/js/jquery-3.1.0.min.js}" crossorigin="anonymous"></script>
  <script th:src="@{/js/popper.min.js}"
          crossorigin="anonymous"></script>
  <script th:src="@{/js/bootstrap.min.js}" crossorigin="anonymous"></script>
</div>
<script src="https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.js"
        crossorigin="anonymous"></script>
<script th:src="@{/js/global.js}"></script>
<script>
    $(function () {
        bsCustomFileInput.init();
    });
    //判断密码输入是否相同，不相同就弹出提示
    $(function(){

      $("#sub").click(function(){

        var pwd = $("input[name='newPassword']").val();

        var cpwd = $("input[name='newPasswordRepeat']").val();
        if(pwd != cpwd){
          alert("两次密码不一致!");
          $("input[name='newPassword']").val("");
          $("input[name='newPasswordRepeat']").val("");
          return false;
        }
      });
    });
</script>
</body>
</html>
